<script setup lang="ts">
const pageSize = defineModel<number>('pageSize');
const isLess = computed(() => (pageSize.value ?? 0) < 50);

function handleSwitch() {
  pageSize.value = isLess.value ? 50 : 10;
}
</script>

<template>
  <div class="mx-auto mt-2 w-fit cursor-pointer rounded-2 bg-sys-layer-d px-4 py-2 text-sm text-sys-text-body transition-all hover:(bg-sys-layer-e text-sys-text-head)" @click="handleSwitch">
    {{ isLess ? $t('mdXrwOTtIgL4qIeuLMyD') : $t('jPkooXrA4714dtnFj4bUz') }}
  </div>
</template>
